<template>
  <div id="userAccess">
    <div class="row_01">
      <Rate :info="rate_info01" />
      <Rate :info="rate_info02" />
      <Rate :info="rate_info03" />
    </div>
    <div class="row_02">
      <div class="left">
        <Header title="用户数量-按大单位统计" />
        <div class="chart_box">
          <Chart id="chart_bar" :message="optionsBar" />
        </div>
      </div>
      <div class="right">
        <Header title="用户数量-按用户类型（角色）统计" />
        <div class="chart_box">
          <Chart id="chart_radar" :message="optionsRadar" />
        </div>
      </div>
    </div>

    <div class="row_03">
      <div class="left">
        <Header title="前台用户访问情况-按登录时间和停留时长统计" />
        <div class="box">
          <Chart id="chart_par01" :message="optionsPar01" />
          <Table width="60%" :header="header01" :list="list01" />
        </div>
      </div>
      <div class="right">
        <Header title="后台用户访问情况-按登录时间和停留时长统计" />
        <div class="box">
          <Chart id="chart_par02" :message="optionsPar02" />
          <Table width="60%" :header="header02" :list="list02" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Rate from "./RateNew.vue";
import Header from "./Header.vue";
import Chart from "@/components/echart/charts.vue";
import Table from "./Table.vue";
import * as echarts from "echarts";
export default {
  name: "UserAccess",
  components: {
    Rate,
    Header,
    Chart,
    Table,
  },
  data() {
    return {
      rate_info01: {
        title: "用户总数",
        num: "68132",
        increase: "8",
        decrease: "22",
      },
      rate_info02: {
        title: "前台用户总数",
        num: "32242",
        increase: "41",
        decrease: "6",
      },
      rate_info03: {
        title: "后台用户总数",
        num: "48215",
        increase: "17",
        decrease: "3",
      },
      optionsBar: {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "line",
          },
          textStyle: {
            color: "#fff",
          },
          className: "LineChart-tooltip",
          extraCssText: `background-color: rgba(0, 21, 50, 0.8);
            color: #fff;
            border: 0.01rem solid #214D87;
            border-color: #214D87;
            box-shadow: 0px 0px 0.08rem 0px rgba(0, 0, 0, 0.3);
            border-radius: 0.04rem;`,
          formatter: function (params) {
            // console.log(params);
            var html = params[0].name + "<br/>";
            for (var i = 0; i < params.length; i++) {
              html +=
                params[i].marker +
                params[i].seriesName +
                "  " +
                params[i].value +
                "个" +
                "<br/>";
            }
            return html;
          },
        },
        grid: {
          left: "3%",
          right: "7%",
          top: "20%",
          bottom: "2%",
          containLabel: true,
        },
        xAxis: {
          name: "大单位",
          nameTextStyle: {
            color: "#fff ",
          },
          type: "category",
          nameLocation: "end",
          axisLabel: {
            color: "#fff",
            fontSize: 10,
            formatter: function (value) {
              var texts = value;
              if (texts.length > 4) {
                // 限制长度自设
                texts = texts.substr(0, 4) + "...";
              }
              return texts;
            },
          },
          data: [
            "陆军研究院",
            "海军装备研究院",
            "空军装备研究院",
            "空军工程大学",
            "火箭军工程大学",
            "火箭军装备研究院",
            "军事科学院",
            "国防大学",
            "中国科学院",
          ],
        },
        yAxis: {
          name: "用户数量",
          nameTextStyle: {
            color: "#fff ",
          },
          type: "value",
          axisLabel: {
            color: "#fff",
          },
          splitLine: {
            lineStyle: {
              color: "#204F8C",
              type: "dashed", //虚线
            },
            show: true, //隐藏
          },
        },
        series: [
          {
            name: "用户数量",
            color: ["#61a5e8"],
            data: [8, 20, 10, 12, 21, 15, 15, 13, 10],
            type: "bar",
            itemStyle: {
              //本月阻拦请求次数的数据渐变色设置，本章重点部分
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#0044c3" }, //开始的颜色
                { offset: 1, color: "#43ddff" }, //结束的颜色
              ]), //中间可以设置多个数值，0 为百分之0 所以可以按照自己的想法，百分之10一个颜色变化都可。
            },
          },
        ],
      },
      optionsRadar: {
        radar: {
          // shape: 'circle',
          indicator: [
            { name: "主管机关", max: 500, axisLabel: { show: true } },
            { name: "大单位智能部门", max: 600 },
            { name: "管理单位管理员", max: 700 },
            { name: "设施仪器管理员", max: 800 },
            { name: "用户单位管理员", max: 900 },
            { name: "平台中心管理员", max: 1000 },
          ],

          splitLine: {
            lineStyle: {
              color: "#fff",
            },
          },
        },
        series: [
          {
            type: "radar",
            data: [
              {
                value: [400, 300, 200, 350, 500, 180],
                name: "Allocated Budget",
                areaStyle: {},
              },
              {
                value: [500, 140, 280, 260, 420, 210],
                name: "Actual Spending",
                areaStyle: {},
              },
            ],
            itemStyle: {
              normal: {
                color: (list) => {
                  // 注意 ！！！！！ 这里的数组一定要和实际的类目长度相等或大于，不然会缺少颜色报错
                  var colorList = [
                    {
                      colorStart: "#FFF5B6",
                      colorEnd: "#DFC338",
                    },
                    // {
                    //   colorStart: "#9AFEA5",
                    //   colorEnd: "#5AD8A6",
                    // },
                    {
                      colorStart: "#96BAFF",
                      colorEnd: "#3260F0",
                    },
                    {
                      colorStart: "#FD9494",
                      colorEnd: "#ED5656",
                    },
                    {
                      colorStart: "#CC9AFE",
                      colorEnd: "#A455F2",
                    },
                  ];
                  return new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                    {
                      //左、下、右、上
                      offset: 0,
                      color: colorList[list.dataIndex]["colorStart"],
                    },
                    {
                      offset: 1,
                      color: colorList[list.dataIndex]["colorEnd"],
                    },
                  ]);
                },
              },
            },
            lineStyle: {
              color: "#fff",
            },
          },
        ],
      },
      optionsPar01: {
        legend: {
          top: "middle",
          orient: "vertical",
          left: "56%",
          textStyle: {
            color: "#fff",
          },
        },
        tooltip: {},
        series: [
          {
            name: "Nightingale Chart",
            type: "pie",
            radius: [0, 120],
            center: ["30%", "50%"],
            roseType: "area",
            itemStyle: {
              borderRadius: 8,
              normal: {
                color: (list) => {
                  // 注意 ！！！！！ 这里的数组一定要和实际的类目长度相等或大于，不然会缺少颜色报错
                  var colorList = [
                    {
                      colorStart: "#FFF5B6",
                      colorEnd: "#DFC338",
                    },
                    {
                      colorStart: "#9AFEA5",
                      colorEnd: "#5AD8A6",
                    },
                    {
                      colorStart: "#96BAFF",
                      colorEnd: "#3260F0",
                    },
                    {
                      colorStart: "#FD9494",
                      colorEnd: "#ED5656",
                    },
                    {
                      colorStart: "#CC9AFE",
                      colorEnd: "#A455F2",
                    },
                    {
                      colorStart: "#FD9494",
                      colorEnd: "#ED5656",
                    },
                    {
                      colorStart: "#CC9AFE",
                      colorEnd: "#A455F2",
                    },
                    {
                      colorStart: "#FD9494",
                      colorEnd: "#ED5656",
                    },
                    {
                      colorStart: "#CC9AFE",
                      colorEnd: "#A455F2",
                    },
                  ];
                  return new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                    {
                      //左、下、右、上
                      offset: 0,
                      color: colorList[list.dataIndex]["colorStart"],
                    },
                    {
                      offset: 1,
                      color: colorList[list.dataIndex]["colorEnd"],
                    },
                  ]);
                },
              },
            },

            label: {
              show: false,
            },
            data: [
              { value: 40, name: "00:00-04:00" },
              { value: 38, name: "04:00-08:00" },
              { value: 32, name: "08:00-12:00" },
              { value: 30, name: "12:00-16:00" },
              { value: 28, name: "16:00-20:00" },
              { value: 26, name: "20:00-24:00" },
            ],
          },
        ],
      },
      header01: [
        {
          colName: "rank",
          name: "名次",
          width: "20%",
        },
        {
          colName: "username",
          name: "用户名",
          width: "20%",
        },
        {
          colName: "department",
          name: "所属单位",
          width: "20%",
        },
        {
          colName: "loginTime",
          name: "登录时间",
          width: "20%",
        },
        {
          colName: "delayTime",
          name: "停留时间",
          width: "20%",
        },
      ],
      list01: [
        {
          rank: 1,
          username: "王宏芳",
          department: "军事科学研究院",
          loginTime: "2024-04-12 14:36",
          delayTime: "1.2h",
        },
        {
          rank: 2,
          username: "李渊哲",
          department: "国防大学",
          loginTime: "2024-03-27 08:15",
          delayTime: "2.5h",
        },
        {
          rank: 3,
          username: "郭旭",
          department: "火箭军装备研究院",
          loginTime: "2024-02-26 09:14",
          delayTime: "1.6h",
        },
        {
          rank: 4,
          username: "陈丽新",
          department: "空军第二兵团",
          loginTime: "2024-01-10 10:36",
          delayTime: "0.4h",
        },
        {
          rank: 5,
          username: "萧柯晏",
          department: "西北工业大学",
          loginTime: "2023-12-19 11:48",
          delayTime: "0.8h",
        },
        {
          rank: 6,
          username: "彭云飞",
          department: "中国核工程研究院",
          loginTime: "2023-12-04 19:04",
          delayTime: "1.0h",
        },
        {
          rank: 7,
          username: "徐天宇",
          department: "西南航天设计研究所",
          loginTime: "2023-11-11 15:21",
          delayTime: "3.6h",
        },
        {
          rank: 8,
          username: "宋海燕",
          department: "中国科学院",
          loginTime: "2023-11-08 17:38",
          delayTime: "4.2h",
        },
        {
          rank: 9,
          username: "张彤",
          department: "空军工程大学",
          loginTime: "2023-10-29 18:21",
          delayTime: "0.5h",
        },
        {
          rank: 10,
          username: "马国虞",
          department: "中国微电子研究中心",
          loginTime: "2023-04-26 12:33",
          delayTime: "0.6h",
        },
      ],
      header02: [
        {
          colName: "rank",
          name: "名次",
          width: "20%",
        },
        {
          colName: "username",
          name: "用户名",
          width: "20%",
        },
        {
          colName: "department",
          name: "所属单位",
          width: "20%",
        },
        {
          colName: "loginTime",
          name: "登录时间",
          width: "20%",
        },
        {
          colName: "operation",
          name: "操作类型",
          width: "20%",
        },
      ],
      list02: [
        {
          rank: 1,
          username: "常璐",
          department: "北京航空航天大学",
          loginTime: "2024-03-03 09:52",
          operation: "新增设备信息",
        },
        {
          rank: 2,
          username: "范凡",
          department: "中国微电子研究院",
          loginTime: "2024-02-10 19:22",
          operation: "修改设备信息",
        },
        {
          rank: 3,
          username: "郝春艳",
          department: "山东武警部队",
          loginTime: "2024-02-16 15:02",
          operation: "删除仪器信息",
        },
        {
          rank: 4,
          username: "席哲奕",
          department: "东部战区第二炮兵军团",
          loginTime: "2024-01-03 11:26",
          operation: "新增软件信息",
        },
        {
          rank: 5,
          username: "孙晓柠",
          department: "中国科学院",
          loginTime: "2023-12-13 13:42",
          operation: "下载考核评价表",
        },
        {
          rank: 6,
          username: "路绍帆",
          department: "中国标准化研究院",
          loginTime: "2023-12-09 14:06",
          operation: "新增单位信息",
        },
        {
          rank: 7,
          username: "曹菲菲",
          department: "中国空间技术研究院",
          loginTime: "2023-12-13 13:42",
          operation: "导出信息发布",
        },
        {
          rank: 8,
          username: "张德彪",
          department: "中国京东方显示技术有限公司",
          loginTime: "2023-12-01 20:12",
          operation: "修改设备信息",
        },
        {
          rank: 9,
          username: "李冬辰",
          department: "中国船舶重工研究院",
          loginTime: "2023-11-30 19:11",
          operation: "删除角色信息",
        },
        {
          rank: 10,
          username: "周柯宇",
          department: "中国生物研究所",
          loginTime: "2023-10-13 13:11",
          operation: "修改软件信息",
        },
      ],
      optionsPar02: {
        graphic: [
          {
            //环形图中间添加文字
            type: "text", //通过不同top值可以设置上下显示
            left: "22%",
            top: "center",
            style: {
              text: `{a|200}\n{b|时长 (小时)}`,
              textAlign: "center",
              rich: {
                a: {
                  fontSize: 20,
                  fill: "#fff",
                },
                b: {
                  fontSize: 16,
                  padding: [10, 0],
                  fill: "#fff",
                },
              },
            },
          },
        ],

        legend: {
          icon: "circle",
          orient: "vertical",
          left: "56%",
          top: "middle",
          textStyle: {
            color: "#fff",
            rich: {
              a: {
                fontSize: 16,
                color: "#fff",
              },
              b: {
                fontSize: 16,
                color: "#fff",
                padding: [0, 7, 0, 7],
              },
            },
          },
        },
        tooltip: {
          trigger: "item",
        },
        series: [
          {
            startAngle: 90,
            radius: ["45%", "55%"],
            center: ["30%", "50%"],
            type: "pie",
            data: [
              { value: 40, name: "00:00-04:00" },
              { value: 38, name: "04:00-08:00" },
              { value: 32, name: "08:00-12:00" },
              { value: 30, name: "12:00-16:00" },
              { value: 28, name: "16:00-20:00" },
              { value: 26, name: "20:00-24:00" },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
            labelLine: {
              show: false,
            },
            label: {
              show: false,
            },
            itemStyle: {
              normal: {
                color: (list) => {
                  // 注意 ！！！！！ 这里的数组一定要和实际的类目长度相等或大于，不然会缺少颜色报错
                  var colorList = [
                    {
                      colorStart: "#FFF5B6",
                      colorEnd: "#DFC338",
                    },
                    {
                      colorStart: "#9AFEA5",
                      colorEnd: "#5AD8A6",
                    },
                    {
                      colorStart: "#96BAFF",
                      colorEnd: "#3260F0",
                    },
                    {
                      colorStart: "#FD9494",
                      colorEnd: "#ED5656",
                    },
                    {
                      colorStart: "#CC9AFE",
                      colorEnd: "#A455F2",
                    },
                    {
                      colorStart: "#FD9494",
                      colorEnd: "#ED5656",
                    },
                    {
                      colorStart: "#CC9AFE",
                      colorEnd: "#A455F2",
                    },
                    {
                      colorStart: "#FD9494",
                      colorEnd: "#ED5656",
                    },
                    {
                      colorStart: "#CC9AFE",
                      colorEnd: "#A455F2",
                    },
                  ];
                  return new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                    {
                      //左、下、右、上
                      offset: 0,
                      color: colorList[list.dataIndex]["colorStart"],
                    },
                    {
                      offset: 1,
                      color: colorList[list.dataIndex]["colorEnd"],
                    },
                  ]);
                },
              },
            },
          },
        ],
      },
    };
  },
};
</script>

<style lang="less" scoped>
#userAccess {
  display: grid;
  grid-template-columns: 7fr 3fr;
  grid-template-rows: 45px calc((100vh - 165px) / 2) calc((100vh - 156px) / 2) 0;
  grid-gap: 15px;
  // & > div {
  //   background: linear-gradient(180deg, #061234 0%, #093964 100%);
  // }
  .row_01 {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 2;
    display: flex;
    & > div:nth-of-type(1) {
      margin-right: 15px;
    }
    & > div:nth-of-type(2) {
      margin-right: 15px;
    }
  }
  .row_02_col_01 {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 2;
    grid-row-end: 3;
    background-color: #f2f2f2;

    display: flex;
    flex-direction: column;
    .chart_box {
      flex: 1;
    }
  }
  .row_02_col_02 {
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 2;
    grid-row-end: 3;
    background-color: #f2f2f2;

    display: flex;
    flex-direction: column;
    .chart_box {
      flex: 1;
    }
  }
  .row_04 {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 4;
    grid-row-end: 5;
    display: flex;
    background-color: #f2f2f2;
    display: flex;
    flex-direction: column;
    .box {
      flex: 1;
      display: flex;
      justify-content: space-around;
      align-items: center;
      #chart_par02 {
        width: 35% !important;
      }
    }
  }
}
.row_02 {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 2;
  grid-row-end: 3;
  display: flex;
  justify-content: space-around;
  & > div {
    width: 50%;
    background: linear-gradient(180deg, #061234 0%, #093964 100%);
    display: flex;
    flex-direction: column;
    .chart_box {
      flex: 1;
    }
  }
  .left {
    margin-right: 15px;
  }
}

.row_03 {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 3;
  grid-row-end: 4;
  display: flex;
  justify-content: space-around;
  .box {
    height: 100%;
    flex: 1;
    display: flex;
    justify-content: space-around;
    align-items: center;
    overflow: auto;
    // #chart_par01 {
    //   width: 60% !important;
    // }
  }
  & > div {
    width: 50%;
    background: linear-gradient(180deg, #061234 0%, #093964 100%);
    display: flex;
    flex-direction: column;
    .chart_box {
      flex: 1;
    }
  }
  .left {
    margin-right: 15px;
  }
}
</style>
